import 'package:flutter/material.dart';
import 'package:flutter_base_plugin/flutter_base_plugin.dart';
import 'package:flutter_base_plugin_example/app_manager/app_router_manager.dart';
import 'package:flutter_base_plugin_example/app_manager/app_routers.dart';
import 'package:flutter_base_plugin_example/models/home_product_model.dart';
import 'package:flutter_base_plugin_example/page/home/vm/home_view_model.dart';

import '../../config/index_config.dart';
import 'model/model.dart';

class HomeGoodsList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    HomeViewModel viewModel = context.watch<HomeViewModel>();
    List<ListItem>? list = viewModel.data?.list!;
    List<TitleItem> titleList = viewModel.titleList;
    int tempIndex = -1;
    // TODO: implement build
    return Container(
      alignment: Alignment.topCenter,
      // margin: EdgeInsets.only(left: 5.w, right: 5.w),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: titleList.map((e) {
              tempIndex++;
              return _buildTitleItem(context, e, tempIndex);
            }).toList(),
          ),
          Container(
            margin: EdgeInsets.only(top: 10.h, left: 10.w, right: 10.w),
            child: Wrap(
              spacing: 5.w,
              runSpacing: 5.w,
              children:
                  list!.map((e) => _buildGoodsListItem(context, e)).toList(),
            ),
          )
        ],
      ),
    );
  }

  Widget _buildTitleItem(BuildContext context, TitleItem item, index) {
    HomeViewModel viewModel = context.watch<HomeViewModel>();

    return InkWell(
      onTap: () {
        // ToastUtils.show("text${index}");
        context.read<HomeViewModel>().setSelectIndex(index);
      },
      child: Container(
        child: Column(
          children: [
            Text(
              item.title,
              style: TextStyle(
                  fontSize: 32.sp,
                  color: viewModel.selectIndex == index
                      ? KColors.homeDelColor
                      : KColors.black),
            ),
            Container(
              margin: EdgeInsets.only(top: 5.h),
              decoration: BoxDecoration(
                  color: viewModel.selectIndex == index
                      ? KColors.homeDelColor
                      : KColors.t00000000,
                  borderRadius: BorderRadius.circular((10.r))),
              padding:
                  EdgeInsets.only(left: 3.w, right: 3.w, top: 1.h, bottom: 1.h),
              child: Text(
                item.subTitle,
                style: TextStyle(
                    fontSize: 22.sp,
                    color: viewModel.selectIndex == index
                        ? KColors.white
                        : KColors.black),
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget _buildGoodsListItem(BuildContext context, ListItem model) {
    return InkWell(
      onTap: () {
        AppRoutesManager.navigateTo(context, AppRouters.goodsDetail,
            params: {"id": model.id});
      },
      child: Container(
        padding: EdgeInsets.all(5.h),
        width: 725.w / 2,
        decoration: BoxDecoration(
            border: Border.all(
                color: Color.fromRGBO(233, 233, 233, 0.9), width: 1)),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Container(
              width: double.infinity,
              child: AspectRatio(
                //防止服务器返回的图片大小不一致导致高度不一致问题
                aspectRatio: 1 / 1,
                child: Image.network(
                  "${model.image}",
                  fit: BoxFit.fill,
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.only(top: 10.h),
              child: Text(
                "${model.storeName}",
                textAlign: TextAlign.left,
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
                style: const TextStyle(color: Colors.black54),
              ),
            ),
            Padding(
              padding: EdgeInsets.only(top: 20.h),
              child: Stack(
                children: <Widget>[
                  Align(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      "${model.price}",
                      style: KFont.prePriceStyle,
                    ),
                  ),
                  Align(
                    alignment: Alignment.centerRight,
                    child:
                        Text("${model.otPrice}", style: KFont.linePriceStyle),
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}
